<template>
  <div class='formatReviewDeduction'>
    <el-dialog :visible.sync="isShow" title="审核订单" @close="closed" center ref="formatReviewDeductionDialog">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="退回原因" prop="review">
          <el-input type="textarea" :rows="4" placeholder="请输入退回原因，通过则无需输入。" v-model="form.review"></el-input>
        </el-form-item>
      </el-form>
      <div class='btns'>
        <el-button
          type="primary"
          class="mr10"
          @click="submitForm('ruleForm','1')"
          v-no-more-click:3000
        >通 过</el-button>
        <el-dropdown trigger="click" placement="bottom" class="free-drop">
          <el-button type="danger">退 回</el-button>
          <el-dropdown-menu slot="dropdown" class="free-drop-menu">
            <el-dropdown-item class="mb10">
              <el-button
                type="warning"
                @click="submitForm('ruleForm','2')"
                v-no-more-click:3000
              >普通退回</el-button>
            </el-dropdown-item>
            <el-dropdown-item class="mb10">
              <el-button
                type="danger"
                @click="deduction(orderForm, 'ruleForm')"
                v-no-more-click:3000
              >扣款退回</el-button>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

    </el-dialog>
    <formatReviewDeduction ref="formatReviewDeduction" @refresh='refresh'/>
  </div>
</template>

<script>
// 扣款
import formatReviewDeduction from "./formatReview-deduction";
export default {
  components: {
    formatReviewDeduction
  },
  data() {
    return {
      isShow: false,
      orderForm: {},
      form: {
        review: ''
      },
      rules: {
        review: [
          {
            // required: true,
            message: "请输入审批意见",
            trigger: "blur"
          }
        ]
      },
      opinions: [],
      order_id: null,
      replyMessage: "",
    };
  },
  methods: {
    show(data) {
      this.order_id = data.id
      this.orderForm = data;
      this.opinions = data.opinions
      this.isShow = true
    },

    closed() {
      this.$refs["ruleForm"].resetFields();
    },
    refresh() {
      let that = this
      setTimeout(() => {
        that.isShow = false
      }, 500)
      this.$emit("refresh")
    },
     //确认通过 / 未通过
    submitForm(formName, pass) {
      if(pass == 1) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.sumbitPost(pass)
          } else {
            return false;
          }
        });
      } else {
        if (this.form.review == '') {
          this.$message({
            type: 'warning',
            message: '请输入退回原因'
          })
        } else {
          this.sumbitPost(pass)
        }
      }
    },
    deduction(data, formName) {
      if (this.form.review == '') {
        this.$message({
          type: 'warning',
          message: '请输入退回原因'
        })
      } else {
        this.$refs["formatReviewDeduction"].show(data, this.form.review);
      }
    },
    sumbitPost(pass) {
      let params = {
        order: this.order_id,
        status: pass,
      }
      if (this.form.review != '') {
        params.opinion =this.form.review
      }
      this.$axios.post(`api/order/${this.order_id}/file_format_audit`, params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: "审核成功！"
          })
          this.closed()
          this.refresh()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }

  }
};
</script>

<style lang='less' type='text/css'>
.formatReviewDeduction {
  .el-dialog {
    width: 900px;
    max-height: 800px;
    overflow-y: auto;
    margin-top: 5vh !important;
  }
  .el-form {
    padding-left: 28px;

  }
  .btns {
    text-align: center;
    padding: 10px;
    margin-bottom:15px;
  }

}
.free-drop-menu {
  .el-dropdown-menu__item {
    padding: 0 10px;
    line-height: 0;
    .normal-btn {
      width: 90px;
      height: 26px;
      padding: 0;
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

</style>
